<template>
  <div class="exam-notice">
    <el-tooltip
      effect="dark"
      content="点击修改"
      placement="right-start"
    >
      <el-button type="primary" link @click="handleSetting">考试须知</el-button>
    </el-tooltip>
    <el-dialog title="通知设置" v-model="showSetting" width="40%" append-to-body @close="settingClose">
      <el-form label-width="110px" label-position="right" ref="settingFormRef" :model="settingForm" :rules="settingFormRules" inline>
        <el-form-item label="通知标题">
          <el-input v-model="settingForm.title" placeholder="请输入标题" />
        </el-form-item>
        <el-form-item label="最短阅读时间">
          <el-input v-model="settingForm.least" type="number">
            <template #append>秒</template>
          </el-input>
        </el-form-item>
        <el-form-item label="通知内容">
          <TinymceEditor v-model:modelValue="settingForm.content" :minHeight="500"/>
        </el-form-item>
      </el-form>
      <template #footer>
        <span>
          <el-button @click="showSetting = false">取消</el-button>
          <el-button type="primary" @click="settingConfirm">确认</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
/* eslint-disable */
import { ref, defineProps, computed, reactive } from 'vue'

const props = defineProps({
  formInfo: {
    type: Object,
  },
})
const formItem = computed(() => { return props.formInfo })
// 考试须知通知设置
const showSetting = ref(false)
const settingForm = ref({
  lessRule: 0
})
const settingFormRef = ref(null)
const settingFormRules = reactive({
  answer: [
    { required: true, message: '请选择正确答案', trigger: 'blur' }
  ]
})
const handleSetting = () => {
  const { title, content, least } = formItem.value.formNotice
  settingForm.value = { title, content, least}
  showSetting.value = true
}
const settingClose = () => {
  settingFormRef.value.resetFields()
}
const settingConfirm = () => {
  settingFormRef.value.validate((valid) => {
    if (valid) {
      const { title, content, least } = settingForm.value
      formItem.value.formNotice.title = title
      formItem.value.formNotice.content = content
      formItem.value.formNotice.least = least
      showSetting.value = false
    } else {
      ElMessage.warning('请设置正确答案')
    }
  })
}
</script>

<style lang='scss' scoped>
.exam-notice{
  display: flex;
  justify-content: center;
}
</style>